<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link th:href="@{/animate.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/common.js}"></script>


    <style>
        a {
            cursor: pointer;
        }

        .line {
            border-bottom: 2px solid #eee;
            width: 97%;
            position: relative;
            left: 12px;
        }
    </style>

</head>
<body style="background-color: #F8F8F8;overflow-x: hidden">
<div>

    <!--    顶部导航-->
    <div class="layui-header" style="background-color: black;">
        <ul class="layui-nav layui-layout-left" style="background-color: black">
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/index?loginName='+ getQueryVariable('loginName')">首页</a></li>
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/myTopic?loginName='+ getQueryVariable('loginName')">我的话题</a>
            </li>
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/followedTopic?loginName='+ getQueryVariable('loginName')">关注话题</a>
            </li>
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/info?loginName='+ getQueryVariable('loginName')">个人中心</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right" style="background-color: black">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <span><text th:text="${param.loginName}"></text></span>
                </a>
            </li>
            <li class="layui-nav-item"><a th:href="@{/userController/logout}">退出</a></li>
        </ul>
    </div>


    <!--    内容-->
    <div style="position: center">
        <div id="appendArea" class="animated fadeIn" style="display: flex;justify-content: center;padding: 30px">

        </div>
    </div>
</div>


<script th:src="@{/layui/jquery-1.11.2.js}"></script>
<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
<script>
    $(function () {
        layui.use(['element', 'form', 'table', 'layer'], function () {
            var element = layui.element;
            var form = layui.form;
            var table = layui.table;
            var layer = layui.layer;
            let appendArea = $("#appendArea");

            $.get('/topicController/getDetail', {id: getQueryVariable('id')}, function (resp) {
                let id = resp.data.id;
                let title = resp.data.title;
                let content = resp.data.content;
                let createTime = resp.data.createTime;
                let updateTime = resp.data.updateTime;
                let creatorLoginName = resp.data.creatorLoginName;
                let updaterLoginName = resp.data.updaterLoginName;
                let tagName = resp.data.tagName;
                let imgDiv ='';
                if (resp.data.img != null && resp.data.img != '') {
                    imgDiv = "                <div style=\"padding: 10px\">" +
                        "                    <div style=\"background: url('/" + resp.data.img + "') no-repeat" +
                        "                       ;background-size: contain;position: relative;height: 200px;width: 300px;left: 15px\">" +
                        "                    </div>" +
                        "                </div>";
                }
                let state = resp.data.state == '0' ? '待解决' : "已解决";
                let creatorOrUpdater = updaterLoginName == null ? creatorLoginName + ' 发布于 ' + createTime : updaterLoginName + ' 更新于 ' + updateTime;

                if (resp.code == 0) {
                    appendArea.empty();
                    appendArea.append("<div style=\"width: 80%;background-color: #fff;border: solid #E0E0E0 1px;border-radius: 15px;box-shadow:0 0 10px #E0E0E0;padding:10px\">" +
                        "" +
                        "                <!--                标题栏-->" +
                        "                <div style=\"display: flex;padding: 10px;align-items: center\">" +
                        "                    <div style=\"width: 85%;padding-left: 10px\">" +
                        "                        <span style=\"font-size: 15px\">话题详情</span>" +
                        "                    </div>" +
                        "                    <div style=\"text-align: right;width:13%\">" +
                        "                        <button type='button' onclick='followTopic()' style=\"cursor: pointer;font-size: 15px;color: #9F9F9F;border: none;background-color: #ffffff;\">+关注" +
                        "                        </button>" +
                        "                    </div>" +
                        "                </div>" +
                        "" +
                        "                <div class=\"line\"></div>" +
                        "" +
                        "                <!--                标题-->" +
                        "                <div style=\"display: flex;padding: 10px;align-items: center\">" +
                        "                    <div style=\"width: 85%;padding-left: 20px\">" +
                        "                        <span style=\"font-size: 20px\"><strong>" + title + "</strong></span>" +
                        "                    </div>" +
                        "                    <div style=\"text-align: right;width:11%\">" +
                        "                        <span style=\"font-size: 15px;color: #A4A4A4\">" + state + "</span>" +
                        "                    </div>" +
                        "                </div>" +
                        "" +
                        "                <!--                作者 发布时间-->" +
                        "                <div style=\"display: flex;padding: 10px \">" +
                        "                    <div style=\"width: 85%;position: relative;padding-left: 15px \">" +
                        "                        <span style=\"font-size: 13px;color: #A4A4A4\">" + creatorOrUpdater + "</span>" +
                        "                    </div>" +
                        "                </div>" +
                        "" +
                        "                <!--                正文-->" +
                        "                <div style=\"padding: 10px;width: 97%\">" +
                        "                    <div style=\"padding-left: 15px;padding-bottom:5px\">" +
                        "                        <span style=\"font-size: 17px\">" + content + "</span>" +
                        "                    </div>" +
                        "                </div>" +
                        "" +
                        "                <!--                图片-->" + imgDiv +
                        "" +
                        "                <div class=\"line\"></div>" +
                        "" +
                        "                <!--                留言-->" +
                        "                <div id=\"commentArea\" style=\"padding: 10px 10px 10px 25px;width: 96%\">" +
                        "                    <div style=\"font-size: 15px\">暂无留言</div> " +
                        "                </div>" +
                        "" +
                        "                <div class=\"line\"></div>" +
                        "" +
                        "                <!--                发表栏-->" +
                        "                <div style=\"padding: 10px ;display: flex\">" +
                        "                    <div style=\"width: 70%;text-align: right\">" +
                        "                        <input id='comment' type=\"text\" style=\"width: 80%;border-radius: 9px;height: 30px;padding-left: 8px\">" +
                        "                    </div>" +
                        "                    <div style=\"width: 30%;position: relative;left: 10px;bottom: 2px\">" +
                        "                        <button onclick='commentBtn(this)' type=\"button\" style=\"width: 30%;border-radius: 9px;height: 36px;background-color:" +
                        "                        #000000;color: white;cursor: pointer\">" +
                        "                            发表" +
                        "                        </button>" +
                        "                    </div>" +
                        "                </div>" +
                        "" +
                        "            </div>");

                    //如果话题存在的话 去查留言信息
                    $.get('/commentController/loadComments', {topicId: getQueryVariable('id')}, function (resp) {
                        if (resp.code == 0) {
                            $("#commentArea").empty();
                            $.each(resp.data, function (index, comment) {
                                let id = comment.id;
                                let content = comment.content;
                                let createTime = comment.createTime;
                                let creatorLoginName = comment.creatorLoginName;
                                let replyLoginName = comment.replyLoginName == null ? "" : "<span style=\"color: #9F9F9F;\">回复&nbsp;" + comment.replyLoginName + "</span>&nbsp;&nbsp;";
                                $("#commentArea").append("<div style=\"padding: 0 0 6px 0;font-size: 15px\">" +
                                    creatorLoginName + "：" + replyLoginName + content +
                                    "<span style=\"color: #9F9F9F;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + createTime + "&nbsp;&nbsp;</span><a name=\"" + creatorLoginName + "\" onclick='replyFunc(this)'>回复</a>" +
                                    "                    </div>");
                            })
                        }
                    }, 'json');

                } else {
                    layer.msg(resp.msg);
                }
            }, 'json')


        })
    })

    function followTopic() {
        $.get('/topicController/followTopic', {
            topicId: getQueryVariable('id'),
            loginName: getQueryVariable('loginName')
        }, function (resp) {
            layer.msg(resp.msg)
        }, 'json')
    }

    function replyFunc(e) {
        let replyExp = "@" + $(e).attr('name') + " ";
        $("#comment").empty();
        $("#comment").val(replyExp);
        $("#comment").focus();
        layer.tips('输入回复内容', '#comment', {
            tips: 1
        });
    }

    function commentBtn(e) {
        let content = $("#comment").val().trim();
        if (content != "") {
            $(e).attr("disabled", true);
            $.get('/commentController/comment', {
                topicId: getQueryVariable('id'),
                loginName: getQueryVariable('loginName'),
                content: content
            }, function (resp) {
                layer.msg(resp.msg);
                setTimeout(() => run(), 1800);

                async function run() {
                    await setTimeout;
                    window.location.reload();
                }
            }, 'json')
        } else {
            layer.msg("请输入内容");
        }

    }

</script>
</body>
</html>